<template>
  <div class="explore mg-0">
    <div class="font-36 color-f fontW-b text-c mgtb-20">{{$t('explore.title')}}</div>
    <div class="exploreNav flex-s-around">
      <div class="exploreItem font-15 font-f-ib fontW-b" :class="exploreType == item.id? 'theme-color':'color-f'" v-for="item in exploreNav" :key="item.id" @click="getExploreType(item)">{{$t('explore.' + item.name)}}</div>
    </div>
    <!-- <div class="exploreContent mgt-20 flex-w-start">
      <div style="height:100%;" v-infinite-scroll="load">
        <div class="exploreitem" v-for="item in exploreData" :key="item.id">
          <trend-item :data="item"/>
        </div>
      </div>
    </div> -->
    <div class="exploreContent mgt-20 flex-w-start">
      <div class="exploreitem" v-for="item in exploreData" :key="item.id">
        <trend-item :data="item"/>
      </div>
    </div>
  </div>
</template>
<script>
import TrendItem from '../components/component/TrendItem'
const exploreNav = [
  {id: 0, name: 'trend'},
  {id: 1, name: 'groupBy'},
  {id: 2, name: 'artWork'},
  {id: 3, name: 'collection'},
  {id: 4, name: 'domainName'},
  {id: 5, name: 'music'},
  {id: 6, name: 'photography'},
  {id: 7, name: 'sport'},
  {id: 8, name: 'tradingCard'},
  {id: 9, name: 'virtualWorld'},
  {id: 10, name: 'public'}
]
export default {
  name: 'explore',
  components: {
    TrendItem
  },
  data () {
    return {
      exploreNav: exploreNav,
      exploreType: 0,
      exploreData: [],
      page: 1,
      pageSize: 8
    }
  },
  created () {
    this.pageInit()
  },
  mounted () {
    window.addEventListener('scroll', this.onSroll)
  },
  methods: {
    pageInit: function () {
      this.getExploreCollectionData()
    },
    getExploreType: function (item) {
      this.exploreType = item.id
      console.log(item.id, this.exploreType)
      this.page = 1
      this.getExploreCollectionData()
    },
    load: function () {
      this.page++
      this.getExploreCollectionData()
    },
    onSroll: function () {
      var scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      const scrollH = document.documentElement.scrollHeight // 文档的完整高度
      const scrollT = document.documentElement.scrollTop || document.body.scrollTop // 当前滚动条的垂直偏移
      const screenH = window.screen.height // 屏幕可视高度
      console.log(`scrollTop:${scrollTop},scrollH:${scrollH},scrollT:${scrollT},screenH:${screenH}`)
      // if (this.hasMore && (scrollH - scrollT - screenH) < 30) {
      //   this.page++
      //   this.getExploreCollectionData()
      // }
    },
    getExploreCollectionData: function () {
      this.$loading.show()
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        cond: ''
      }
      this.$Api.Collection.getCollectionBuyType(params)
        .then(res => {
          this.$loading.hide()
          // console.log(res, 'getExploreCollectionData', JSON.stringify(res))
          if (res && res.code === 200) {
            let result = []
            this.hasMore = res.data.hasNext
            res.data.list.forEach(item => {
              let obj = {}
              obj.ID = item.ID
              obj.name = item.Name
              obj.desc = item.Description
              obj.head_url = item.ImageUrl
              obj.img_url = item.BannerImageUrl
              obj.Address = item.Address
              obj.HoldAddress = item.HoldAddress
              obj.ownerName = item.HoldAddress
              result.push(obj)
            })
            console.log(result, 'result')
            if (this.page > 1) {
              if (result.length === 0) {
                this.exploreData = this.exploreData
              } else {
                this.exploreData = [...this.exploreData, ...result]
              }
            } else {
              this.exploreData = result
            }
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, 'getExploreCollectionData', JSON.stringify(err))
        })
    }
  }
}
</script>
<style lang="less" scoped>
.explore {
  width: 94%;
  .exploreNav {
    .exploreItem {
      cursor: pointer;
    }
  }
  .exploreContent {
    // height: 80vh;
    overflow-y: auto;
    .exploreitem {
      width: 23%;
      margin: 1%;
    }
    @media screen and (max-width: 891px) {
      .exploreitem {
        width: 48%;
      }
    }
    @media screen and (min-width: 891px)and (max-width: 1285px) {
      .exploreitem {
        width: 31%;
      }
    }
  }
}
</style>
